<template>
	<view class="add-SA">
		<view class="SA-personal">
			<view class="bottom-msg">
				<view class="list-item">
					<view class="item-1 item">
						<view class="left">
							收货人
						</view>
						<view class="right">
							<input type="text" v-model="adName" maxlength="8" placeholder="收货人姓名" placeholder-style="font-size: 24upx; color:#999; font-weight: 100;" />
						</view>
					</view>

					<view class="item-2 item">
						<view class="left">
							手机号码
						</view>
						<view class="right">
							<input type="number" v-model="adPhone" placeholder="收货人联系方式" maxlength="11" placeholder-style="font-size: 24upx; color:#999; font-weight: 100;" />
						</view>
					</view>
			
					<view class="item-3 item" style="position: relative;">
						<view class="left">
							所在省市
						</view>
						<view class="right">
							<view class="" @tap="changeShow('QS_Picekr_city')">
								{{label}}
							</view>
							<QSpicker type="city" ref="QS_Picekr_city" :dataSet="citySet" pickerId="city_1" @confirm="confirm" />

						</view>
					</view>
					
					<view class="item-1 item">
						<view class="left">
							地区定位
						</view>
						<view @click="selectOption" :class="position=='请选择地址~'?'optionS':'right'">
							{{position}}
						</view>
					</view>

				<view class="item-2 item detail-address">
					<view class="left">
						详细地址:
					</view>
					<view class="right textarea-box">
						<textarea v-model="detailAd" auto-height="true" placeholder-style="font-size: 24upx; color:#999; font-weight: 100;padding-top:8upx"
						 placeholder="如道路、门牌号、小区、楼栋号" />
					</view>
		      </view>
		      
		      <view class="mr-address">
		        <view class="ad-left">
		          设为默认地址
		        </view>
		        <view class="ad-right">
							<checkbox-group @change="onCheckBox" >
		          <label>
		            <checkbox color="#FF557D" :checked="1 == is_default" value="1"/>
		          </label>
							</checkbox-group>
		        </view>
		      </view>
					
		    </view>
		  </view>
		  <view class="SA-btn" @click="onRevise">
		    <text>确认</text>
		  </view>
		</view>
		</view>
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
	export default {
		components:{
			QSpicker
		},
		data() {
			return {
				position:"请选择地址~",
				adName: '',
				adPhone: '',
				detailAd: '',
				is_default: 0,
				label: '请选择',
				province: '',
				city: '',
				district: '',
				area_ids: [],
				longitude:"",
				latitude:"",
				map_name:"",
				citySet: {
					defaultValue: [0, 0, 0],
				},
			};
		},
		methods: {
			selectOption(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.position = res.name;
						this.map_name = res.name
						// uni.setStorageSync('lph-address', {
						// 	name: res.name,
						// 	long: res.longitude,
						// 	lat: res.latitude
						// });
					}
				})
			},
			// 城市选择
			changeShow(name) {
				uni.hideKeyboard()
				this.$refs[name].show();
			},
			// 点击确认的回调
			confirm(e) {
				let [a, b, c] = e.data.label;
				this.province = a;
				this.city = b;
				this.district = c;
				this.label = `${a}-${b}-${c}`
				this.area_ids = e.data.value;
				
			},
			
			// 路由跳转
			navTo(url){
				uni.navigateTo({
					url
				})
			},
			// 是否默认
			onCheckBox(e) {
				if(e.detail.value[0] == '1'){
					this.is_default = 1
				}else{
					this.is_default = 0
				}
			},
			// 确认按钮
			async onRevise(){
				let data = {
					phone: this.adPhone,
					name: this.adName,
					province: this.province, // 1 
					city: this.city, // 2
					district: this.district, // 3
					address_id: this.area_ids, 
					address: this.detailAd,
					longitude:this.longitude,
					latitude:this.latitude,
					map_name:this.map_name
					}
				// is_default: this.is_default
				let a = await this.$http.addShipAddress(data);
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
				if(this.is_default == 1) {
					setTimeout(() => {
						this.$http.setDefaultAddress({addressid:a.data}).then((data) => {
							// console.log(data);
						}) 
					},1000)
				}
				return;
				setTimeout(() => {
					uni.navigateBack({
						url: '/pages/user/set/shipAddress'
					})
				},500)
				
				
			},
			
		
			
		},
	}
</script>

<style lang="scss" scoped>
@import 'static/css/smallCommon.scss';
</style>
